<template>
  <div class="structure">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      class="eltab"
    >
      <el-tab-pane label="局端主机" name="first">
        <p class="pbq">
          请输入边缘网关的MAC和IP地址(请确保边缘局端主机处于边缘网关的同级或下级路由)
        </p>
        <div class="jdzj">
          <el-input
            v-model="gwInformation.root_gw_id"
            placeholder="请输入MAC地址"
          ></el-input>
          <el-input
            class="input"
            v-model="gwInformation.root_gw_ip"
            placeholder="请输入IP地址"
          ></el-input>
          <div class="qxqr">
            <el-popover placement="bottom" width="200" v-model="visible10">
              <p>与边缘网关解绑将清除自身子设备信息, 是否继续解绑？</p>
              <div style="text-align: center; margin: 0">
                <el-button size="mini" @click="visible10 = false"
                  >退出</el-button
                >
                <el-button type="primary" size="mini" @click="unBindMode2()"
                  >确定</el-button
                >
              </div>
              <el-button slot="reference" type="danger">取消</el-button>
            </el-popover>
            &nbsp;&nbsp;
            <el-button @click="bindMode()" type="primary">确认</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="边缘网关" name="second">
        <el-table
          :data="rightTable"
          :header-cell-style="{
            'text-align': 'left',
            color: '#000',
            'border-color': '#ccffff',
            background: '#CCFFFF',
          }"
          :cell-style="{ 'text-align': 'left', 'border-color': '#fff' }"
        >
          <template slot="empty">
            <i
              :class="isLoading ? 'el-icon-loading' : 'el-icon-warning-outline'"
              style="display: block; font-size: 40px; margin-top: 20px"
            ></i>
            <div v-if="isLoading">正在加载局端主机列表</div>
            <div v-if="!isLoading">没有查询到符合条件的记录</div>
          </template>
          <el-table-column prop="date" label="局端主机">
            <template>{{ this.rightTable[0] }}</template>
            <!-- <template>{{ this.rightTable[0].gw_name }}</template> -->
          </el-table-column>
          <el-table-column label="IP">
            <template>{{ this.rightTable[0] }}</template>
            <!-- <template>{{ this.rightTable[0].gw_name }}</template> -->
          </el-table-column>
          <el-table-column label="厂家信息" width="220">
            <template>{{ this.equipmentInformation[0].value }} </template>
          </el-table-column>
          <el-table-column label="型号">
            <template>{{ this.equipmentInformation[1].value }} </template>
          </el-table-column>
          <el-table-column label="MAC">
            <template>
              {{ this.equipmentInformation[2].value }}
            </template>
            <!-- <template>
              {{ this.rightTable[0].gw_id }}
            </template> -->
          </el-table-column>
          <el-table-column label="CCO">
            <template>
              {{ this.equipmentInformation[3].value }}
            </template>
          </el-table-column>
          <el-table-column label="MCU">
            <template>
              {{ this.equipmentInformation[4].value }}
            </template>
          </el-table-column>
          <el-table-column label="WEB">
            <template>
              {{ this.equipmentInformation[5].value }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address6"
            label="操作"
            align="left"
            width="120"
          >
            <el-button @click="checkUpdate">检查更新</el-button>
          </el-table-column>
        </el-table>
        <!-- <el-table :data="tableData" height="450">
          <el-table-column
            prop="date"
            label="云端服务"
            align="left"
            width="280"
          >
          </el-table-column>
          <el-table-column prop="name" label="版本" width="280">
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <div class="czdiv"><el-button>接入平台</el-button></div>
            <div class="czdiv">
              <el-button class="bybtn">数据备份</el-button>
            </div>
            <div class="czdiv">
              <el-button class="bybtn">数据导入</el-button>
            </div>
          </el-table-column>
        </el-table> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
// import { Button } from "element-ui";
import Api from "@/api/api";

export default {
  inject: ["reload"],
  data() {
    return {
      activeName: "first",
      // localSid: localStorage.getItem("sid"),
      localSid: "577688740d9d258b92c61e6b1f5498ff",
      gwInformation: {},
      rightTable: [{}],
      // rightarea: [{ isOn: true }],
      visible10: false,
      isLoading: false,
      equipmentInformation: [
        { value: "深圳市海令科技有限公司" },
        { value: "" },
        { value: "" },
        { value: "" },
        { value: "" },
        { value: "v2.0.0" },
      ],
    };
  },
  async created() {
    let res = await Api.get_local_gw_info({
      params: { sid: this.localSid },
    });
    this.equipmentInformation[1].value = res.result.gw_model;
    this.equipmentInformation[2].value = res.result.gw_id;
    this.equipmentInformation[3].value = "v" + res.result.cco_version;
    this.equipmentInformation[4].value = "v" + res.result.mcu_version;

    let res2 = await this.getMode();
    this.tableData = res.result;
    console.log("数据源一11111基础信息里面的", res.result);

    this.rightTable = res2.result.sub_gw_list;
    console.log("数据源二22222", this.rightTable);
    this.gwInformation = res2.result;

    console.log("input绑定的数据>", this.gwInformation);
  },
  methods: {
    async getMode() {
      this.isLoading = true;
      let res = await Api.get_gw_work_mode_info({
        params: { sid: this.localSid, gw_id: "84B984261D21" },
      });
      this.isLoading = false;
      return res;
    },
    async checkUpdate() {
      let res = await Api.check_update({
        params: { sid: this.localSid },
      });

      if (!res.result.has_new_version) {
        this.$message({
          showClose: true,
          type: "success",
          message: "当前已是最新版本",
        });
      } else {
        this.$message({
          showClose: true,
          type: "warning",
          message: "有新版本待更新",
        });
      }
    },
    async unBindMode2() {
      await Api.unbind_gw_relation({
        params: { sid: this.localSid, gw_id: this.gwInformation.gw_id },
      });
      this.visible10 = false;
      this.reload();
    },
    async bindMode() {
      await Api.set_gw_work_mode_info({
        params: { sid: this.localSid, ...this.gwInformation },
      });
      this.reload();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="scss" scoped>
.structure {
  margin-left: 30px;
  width: 96%;
  height: calc(100vh - 80px);
}
::v-deep .is-active {
  text-align: center;
  color: aliceblue;
  background: #2559c0 !important;
  border-radius: 1px !important;
}

.pbq {
  font-size: 14px;
  float: left;
  margin-top: 20px;
  color: darkgray;
}
.eltab {
  margin-left: 50px;
}
.input {
  margin-top: 20px;
}
.qxqr {
  margin-top: 20px;
  float: right;
}
.jdzj {
  width: 50%;
}

.ydfw {
  margin-top: 45px;
}
.ydfw1 {
  margin-left: -470px;
}
.bybtn {
  margin-left: 300px;
}
.czdiv {
  display: inline-block;
}
</style>
